<template>
  <div>
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="back" />
        <div>任务{{rwjbDwType==0?'接收':'下发'}}</div>
        <!-- <div>查看任务</div> -->
      </div>
    </header>
    <div class="up"></div>
    <div class="contents">
      <div class="main_top">
        <div class="tits">{{ name }}</div>
        <div class="all">
          <tr>
            <td style="border-bottom:none;line-height:1.8rem">
              <div class="kuangtTit">单位</div>
            </td>
          </tr>
          <div class="nice" id="nice">
            <table>
              <thead>
                <tr>
                  <td rowspan="2">
                    <div class="kuangtTwo">前期工作</div>
                  </td>
                  <td colspan="4">行政执法</td>
                </tr>
                <tr>
                  <td v-for="(item, index) in titleList" :key="index">
                    <div class="tit_widthgo">{{ item }}</div>
                  </td>
                </tr>
              </thead>
            </table>
          </div>
        </div>
        <div style="display:flex" class="tjb">
          <div class="lefts" id="lefts">
            <table>
              <tr v-for="(item, index) in dataList" :key="index" @click="jumpConclusion(item.dwId)">
                <td>
                  <div class="kuangt">
                    <div>{{ item.dw }}</div>
                    <div>
                      <img class="kuang_icon" src="../../assets/images/rwjb_green.png" alt style="width: 20px;height: 20px" />
                    </div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <div class="rights" id="rights" @scroll="add()">
            <table>
              <tr class="titit" v-for="(item, index) in dataList" :key="index">
                <td>
                  <div class="tit_width" @click="jumpConclusion(item.dwId, item.qqgz)">{{ item.qqgz }}</div>
                </td>
                <td>
                  <div class="tit_width" @click="jumpConclusion(item.dwId, item.jgdx)">{{ item.jgdx }}</div>
                </td>
                <td>
                  <div class="tit_width" @click="jumpConclusion(item.dwId, item.xc)">{{ item.xc }}</div>
                </td>
                <td>
                  <div class="tit_width" @click="jumpConclusion(item.dwId, item.yh)">{{ item.yh }}</div>
                </td>
                <td>
                  <div class="tit_width" @click="jumpConclusion(item.dwId, item.zg)">{{ item.zg }}</div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      titleList: ['监督对象', '巡查', '隐患', '整改'],
      dataList: [],
      userId: '',
      rwjbDwType: '',
      name: ''
    };
  },
  mounted() {
    var _this = this;
    // let a = localStorage.getItem('rwjb_taskSpecialId');
    // let b = localStorage.getItem('rwjb_theNewTaskAssignId');
    // this.rwjbDwType = localStorage.getItem('rwjbDwType')
    // this.userId = localStorage.getItem('userId')
    // this.list();
    // this.query(a, b);

    //物理返回
    // window.addEventListener("popstate", function(){
    //   _this.back();
    // }, false);
  },
  methods: {
    back(){//返回
      //this.$router.push("/table_list");
      this.$router.back()
    },
    //  查询详情
    query (data, datas) {
      let that = this;
      let params = {
        userId: this.userId,
        taskSpecialId: data,
        theNewTaskAssignId: datas,
        isPostOrGet: this.rwjbDwType
      };
      that.axios.get(`${that.$global_msg.Url.host}/taskAssign/streetStatistics`,
        { params }).then(res => {
        console.log(res);
        that.dataList = res.data.rows.streetDec;
        that.name = res.data.rows.name;
      })
    },
    //  跳转总结
    jumpConclusion (id, ids) {
      var t = $(".rights").scrollTop()
        console.log("距离：", t)
        sessionStorage.setItem("table_listtwo_scroll", t)
      if (ids !== 0) {
        localStorage.setItem('rwjb_dwId', id);
        this.$router.push({path: '/gzzj'});
      }
    },
    list() {
      var h_gao = window.screen.height;
      var w_kuan = window.screen.width / 10;
      console.log(w_kuan);
      h_gao = h_gao - (300 / 54) * w_kuan;
      console.log(h_gao);
      $(".tjb").css({ height: h_gao + "px" });
    },
    add(ev) {
      console.log();
      var a = document.getElementById("rights").scrollTop;
      console.log(a);
      var b = document.getElementById("rights").scrollLeft;
      console.log(b);
      document.getElementById("lefts").scrollTop = a;
      document.getElementById("nice").scrollLeft = b;
    }
  },
  created() {
    // window.addEventListener("scroll", this.add, true);
  },
  beforeRouteEnter(to, from, next) {
      console.log(from)
      next((vm) => {
        vm.$nextTick(function () {
          vm.rwjbDwType = localStorage.getItem('rwjbDwType')
          vm.userId = localStorage.getItem('userId')
          vm.list();
          if (from.path == "/table_list" || from.path == "/") {
            let a = localStorage.getItem('rwjb_taskSpecialId');
            let b = localStorage.getItem('rwjb_theNewTaskAssignId');
            vm.query(a, b);
          } else {
            // vm.init();
            setTimeout(() => {
              this.$nextTick(() => {
                // document.querySelector('#app').scrollTop = this.offsetTop;
                $(".rights").scrollTop(sessionStorage.getItem("table_listtwo_scroll"))
              });
            }, 10)
          }
        });

      });
    },

};
</script>
<style  scoped>
* {
  color: #ffffff;
}
.header {
  height: 1.8519rem;
  background: #007aff;
  padding-top: 0.8333rem;
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 20;
  font-size: 0.388888rem;
}

.title {
  padding: 0 0.3704rem;
  display: flex;
  align-items: center;
  color: #fff;
}

.title > div {
  width: 100%;
  font-size: 0.4444rem;
  text-align: center;
}
thead {
  overflow: auto;
}
.img_zuo {
  width: 0.2593rem;
  height: 0.463rem;
}
.found {
  display: inline-block;
  margin-right: 0.37037rem;
}
.up {
  padding-top: 2.037037rem;
}
table {
  border: 1px solid #ffffff;
  margin: 0 auto;
  color: #ffffff;
  border-collapse: collapse;
  text-align: center;
}
th {
  height: 0.925926rem;
  margin-top: 1.111111rem;
  border: 1px solid #ffffff;
}
td {
  height: 0.925926rem;
  border: 1px solid #ffffff;
  border-right: none;
  /* border-bottom: none; */
}
.main_top {
  background: #7ac0fe;
}
.contents {
  width: 100%;
  margin: 0 auto;
  /* border-radius: 0.185185rem; */
  border-radius: 0.37037rem;
  overflow: hidden;
  padding: 0 0.37037rem;
  box-sizing: border-box;
}
.tits {
  text-align: center;
  color: #ffffff;
  padding-top: 0.185185rem;
  font-size: 0.407407rem;
  margin-bottom: 0.185185rem;
}
.left {
  width: 1.851852rem;
  text-align: center;
  color: #ffffff;
}
.kuangt {
  width: 2.78rem;
  height: 1.111111rem;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 25px;
  font-size: 36px;
}
.kuangtTit {
  width: 2.6659259rem;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  z-index: 10;
  box-sizing: border-box;
}
.kuang_icon {
  width: 0.666667rem;
  height: auto;
}
.kuangtTwo {
  width: 1.62rem;
  /* height: 2.111111rem; */
  /* line-height: 2.111111rem; */
  border-right: 1px solid #ffffff;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  z-index: 10;
  /* display: inline-block; */
  box-sizing: border-box;
}
.tit_widthgo {
  width: 1.62rem;
}
.tit_width {
  width: 1.62rem;
  height: 1.111111rem;
  line-height: 1.111111rem;
}
.nice {
  /* display: inline-block; */
  width: 6.851852rem;
  overflow: hidden;
  box-sizing: border-box;
}
.lefts {
  overflow: hidden;
  box-sizing: border-box;
  z-index: 100;
  /* border-right: 1PX solid #ffffff; */
}
.rights {
  width: 6.851852rem;
  overflow: auto;
}
.all {
  display: flex;
}
</style>
